<template>
	<navbar title="修改信息" :isBack="true"></navbar>
	<view class=""
		style="padding: 110rpx 56rpx 0 56rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
		<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="btnImage">
			<view class=""
				style="width: 140rpx;height: 140rpx;border-radius: 70rpx;border: 15rpx solid #D9D9D9;display: flex;align-items: center;justify-content: center;position: relative;">
				<view class="">
					<image :src="param.avatar" style="width: 114rpx;height:114rpx;border-radius:60rpx;z-index: -1;"
						mode="aspectFill"></image>
				</view>
				<view class="" style="position: absolute;bottom: -20rpx;right: -20rpx;">
					<image src="../../static/profile/pic.png" style="width: 48rpx;height: 48rpx;" mode="aspectFill">
					</image>
				</view>
			</view>
		</button>

		<view class=""
			style="margin-top: 100rpx;display: flex;padding-bottom: 30rpx;border-bottom: 1rpx solid #F9F9F9;width: 100%;">
			<view class="" style="font-weight: bold;">
				昵称
			</view>
			<view class="" style="margin-left: 60rpx;">

				<input type="nickname" v-model="param.nick_name" placeholder="请输入昵称" @change="getNickname">
			</view>
		</view>
		<view class="" @tap="submit"
			style="margin-top: 170rpx;width: 100%;height: 98rpx;border-radius: 110rpx;display: flex;justify-content: center;align-items: center;background-color: #405EEC;color: white;font-size: 32rpx;">
			保存
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		onLoad,
		onShareAppMessage,
		onShareTimeline,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from 'vue'
	import { editInfo } from '@/service/api/index'
	import tools from '@/utils/tools'
	const param = reactive({
		avatar: "",
		nick_name: "",
	})
	onLoad((opt) => {
		param.avatar = opt.avatar
			param.nick_name  =opt.name
			})
	const submit = async () => {
		const res = await editInfo(param)
		tools.showToast(res.msg);
		setTimeout(() => {
			if (res.code == 1) {

				tools.navTo('', 2);
			}
		}, 1000)


	}
	//获取头像
	const onChooseAvatar = (e : any) => {
		uni.showLoading({
			title: '图片上传中'
		});
		let img = e.detail.avatarUrl
		console.log(img);
		tools.getOssUrl([img]).then((res : any) => {
			param.avatar = res;
			tools.showToast('上传成功')
		}).catch((err) => {
			tools.showToast('上传失败')
		})

		uni.hideLoading()

	}
	const getNickname = (e)=>{
		param.nick_name = e.detail.value;
	}
	// //上传头像
	// const uploadAvatar = async () => {
	// 	tools.chooseImage().then((res : string[]) => {
	// 		console.log(res);
	// 		tools.getOssUrl<string[]>(res).then((url : any) => {
	// 			param.avatar = url
	// 		})
	// 	})


	// }
</script>

<style scoped lang="scss">
	:deep(.btnImage) {
		width: 160rpx;
		height: 160rpx;
		// border-radius: 80rpx;
		background-color: white;
		padding: 0 !important;
	}

	:deep(.btnImage::after) {
		border: 0;
	}
</style>